<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<title>编辑文章</title>
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
	<link rel="stylesheet" th:href="@{/iconfont/iconfont.css}"/>
	<link rel="stylesheet" th:href="@{/css/app.css}"/>
	<style>
		.w-e-text-container{
			height: 780px !important;
		}
	</style>
</head>
<body>
<div class="z-content">
	<div class="z-card">
		<div class="z-card-header">编辑文章</div>
		<div class="z-card-body">
			<form id="articleForm" class="form-horizontal">
				<input th:value="${article.id}" type="hidden" name="id">
				<input id="articleStatus" type="hidden" name="status">
				<input id="articleContent" th:value="${article.content}" type="hidden" name="content">
				<input id="articleContentMd" th:value="${article.contentMd}" type="hidden" name="contentMd">
				<div class="col-lg-7 article-area">
					<div class="form-group">
						<div class="col-xs-12">
							<input type="text" class="form-control" id="title" name="title" th:value="${article.title}" placeholder="请输入文章标题" require="">
						</div>
					</div>
					<div class="form-group form-editor">
						<div class="col-xs-12" id="article-editor">
						</div>
					</div>
				</div>
				<div class="col-lg-5 article-extra">
					<div class="form-group">
						<div class="col-xs-12">
							<a class="btn btn-success mr-15" onclick="saveArticle(1)">发布文章</a>
							<a class="btn btn-warning" onclick="saveArticle(0)">保存草稿</a>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >公开/私密:</label>
							<div class="ml-80 control-label">
								<div class="z-radio">
									<input type="radio" th:field="*{article.isPublic}" name="isPublic" value="1" require=""/>
									<label><i></i>公开</label>
								</div>
								<div class="z-radio">
									<input type="radio" th:field="*{article.isPublic}" name="isPublic" value="0" require=""/>
									<label><i></i>私密</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-12">
							<label class="control-label label-four">是否原创:</label>
							<div class="ml-80 control-label">
								<div class="z-radio">
									<input type="radio" th:field="*{article.origin}" name="origin" value="1" require=""/>
									<label><i></i>原创</label>
								</div>
								<div class="z-radio">
									<input type="radio" th:field="*{article.origin}" name="origin" value="0" require=""/>
									<label><i></i>转载</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">文章分类:</label>
							<div class="ml-80">
								<input id="categoryId" type="text" name="categoryId" th:value="${article.categoryId}"  class="form-control" placeholder="请选择" require=""/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">文章标签:</label>
							<div class="ml-80">
								<input id="tags" type="text" name="tags" th:value="${article.tags}" class="form-control" placeholder="多个标签英文逗号隔开"/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >文章封面:</label>
							<div class="ml-80">
								<div class="input-group">
									<input id="cover" type="text" name="cover" th:value="${article.cover}" class="form-control" placeholder="文章封面图片URL">
									<span class="input-group-btn">
					                      <button type="button" class="btn btn-success btn-flat upload-cover">上传</button>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">模板名称:</label>
							<div class="ml-80">
								<input type="text" name="template" th:value="${article.template}" class="form-control" placeholder="模板名称" require=""/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">访问路径:</label>
							<div class="ml-80">
								<input id="aliasName" type="text" name="aliasName" th:value="${article.aliasName}"  class="form-control" placeholder="访问路径，默认自动生成"/>
								<span class="color-999" th:text="${@module.get('sysConfig').SITE_HOST+'/a/'}"></span><span id="aliasNameAuto" th:text="${article.aliasName==null||article.aliasName==''?'${auto}':article.aliasName}" class="text-primary">${auto}</span>
							</div>
						</div>
					</div>
					<div id="uploadVideoContent" th:class="${article.type==1?'form-group display-none':'form-group'}">
						<div class="col-xs-12">
							<label class="control-label label-four" >视频地址:</label>
							<div class="ml-80">
								<div class="input-group">
									<input id="video" type="text" name="video" th:value="${article.video}" class="form-control" placeholder="视频URL">
									<span class="input-group-btn">
					                      <button type="button" class="btn btn-success btn-flat upload-video">上传</button>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >文章类型:</label>
							<div class="ml-80 control-label">
								<div class="z-radio">
									<input type="radio" name="type" th:field="*{article.type}" value="1" checked require=""/>
									<label><i></i>图文</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="type" th:field="*{article.type}" value="2" require=""/>
									<label><i></i>视频</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >是否置顶:</label>
							<div class="ml-80 control-label">
								<div class="z-radio">
									<input type="radio" name="isTop" th:field="*{article.isTop}" value="1" require=""/>
									<label><i></i>是</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="isTop" th:field="*{article.isTop}" value="0" require=""/>
									<label><i></i>否</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >是否推荐:</label>
							<div class="ml-80 control-label">
								<div class="z-radio">
									<input type="radio" name="isRec" th:field="*{article.isRec}" value="1" require=""/>
									<label><i></i>是</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="isRec" th:field="*{article.isRec}" value="0" require=""/>
									<label><i></i>否</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >开启评论:</label>
							<div class="ml-80 control-label">
								<div class="z-radio">
									<input type="radio" name="isComment" th:field="*{article.isComment}" value="1" require=""/>
									<label><i></i>是</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="isComment" th:field="*{article.isComment}" value="0" require=""/>
									<label><i></i>否</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >文章简介:</label>
							<div class="ml-80">
								<textarea type="text" rows="3" class="form-control" name="intro" th:text="${article.intro}"  placeholder="文章简介"></textarea>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >seo keywords:</label>
							<div class="ml-80">
								<textarea type="text" rows="2" class="form-control" name="seoKey" th:text="${article.seoKey}"  placeholder="文章关键词（SEO优化）"></textarea>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >seo description:</label>
							<div class="ml-80">
								<textarea type="text" rows="2" class="form-control" name="seoDesc" th:text="${article.seoDesc}"  placeholder="文章描述（SEO优化）"></textarea>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wangEditor.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
<script>
	$(function () {
        App.initUploader({
            pick: '.upload-cover',
            url:'/upload/upload',
            accept:'jpg,png',
            before:function(){
                App.mask(".upload-cover");
            },
            onSuccess:function(picker,data){
                App.unmask(".upload-cover");
                if(data.status===200){
                    $("#cover").val(data.url);
				}
            }
        });

        App.initUploader({
            pick: '.upload-video',
            url:'/upload/upload',
            before:function(){
                App.mask(".upload-video");
            },
            onSuccess:function(picker,data){
                App.unmask(".upload-video");
                if(data.status===200){
                    $("#video").val(data.url);
                }
            }
        });

        App.postAjax("/admin/category/list",{disabled:true},function (data) {
            var treeSelectOptions = {
                placeHolder: "请选择",
                data: data.data,
                iconType: 2,
                nameField: 'name',
                valueField: 'id'
            };
			App.initTreeSelect("#categoryId", treeSelectOptions);
        });

        //文章类型
        $("input[name='type']").on("change",function () {
            if($(this).val()==="1"){
                $("#uploadVideoContent").hide();
            }else{
                $("#uploadVideoContent").show();
            }
        });

        //别名
		$("#aliasName").bind("input propertychange",function(event){
			var aliasName = $("#aliasName").val();
			$("#aliasNameAuto").text(aliasName===""?"${auto}":aliasName);
		});

    });

    var E = window.wangEditor;
    var articleEditor = new E('#article-editor');
    articleEditor.customConfig.uploadImgServer = '/upload/uploadForEditor';
    articleEditor.customConfig.uploadFileName = 'img';
    articleEditor.customConfig.uploadImgTimeout = 30000;
    articleEditor.customConfig.uploadImgMaxLength = 5;
    articleEditor.create();
    articleEditor.txt.html($("#articleContent").val());


    function  saveArticle(status) {
		$("#articleStatus").val(status);
        if(validateArticleForm()){
        	App.postAjax("/admin/article/exist/aliasName",{id:[[${article.id}]],aliasName:$("#aliasName").val().trim()}, function (exist) {
				if(!exist){
					App.confirm({content:"确认保存文章？"},function () {
						App.postAjax("/admin/article/save",$("#articleForm").serialize(),function (data) {
							if(data.status===200){
								App.msgS(data.msg)
							}else{
								App.msgE(data.msg)
							}
						})
					})
				}else{
					App.msgE("路径别名已存在！");
					App.makeError("#aliasName","路径别名已存在");
				}
			});

        }
    }

    function  validateArticleForm() {
        var flag1 = App.validate("#articleForm");
        var flag2 = validateArticleContent();
        return flag1 && flag2;
    }

    function  validateArticleContent() {
		var articleText = articleEditor.txt.text();
		var articleHtml = articleEditor.txt.html();
		if("<p><br></p>"!==articleHtml){
			$("#articleContentMd").val(articleText);
			$("#articleContent").val(articleHtml);
			return true;
		}else{
			App.makeError("#article-editor .w-e-text-container","请输入文章内容", true);
			return false;
		}
	}
</script>
</body>
</html>